
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
    overflow-x: hidden;
  }

  * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  input, textarea {
    font-family: inherit;
  }
}

@layer components {
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }

  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .wechat-bg {
    background-color: #EDEDED;
  }

  .wechat-green {
    background-color: #07C160;
  }

  .wechat-dark-green {
    background-color: #06A050;
  }

  .wechat-light-green {
    background-color: #95EC69;
  }

  .message-bubble {
    max-width: 70%;
    word-wrap: break-word;
    word-break: break-all;
  }

  .message-bubble-left {
    background-color: white;
    color: black;
  }

  .message-bubble-right {
    background-color: #95EC69;
    color: black;
  }

  .tab-bar {
    background-color: #F7F7FA;
    border-top: 1px solid #E7E7E7;
  }

  .nav-bar {
    background-color: #07C160;
    color: white;
  }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 防止长按选中 */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 动画类 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s ease;
}

.slide-right-enter-from {
  transform: translateX(100%);
}

.slide-right-leave-to {
  transform: translateX(100%);
}

.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 0.3s ease;
}

.slide-left-enter-from {
  transform: translateX(-100%);
}

.slide-left-leave-to {
  transform: translateX(-100%);
}
